<template>
  <div>
    <el-aside :width="isCollapse ? '50px' : '200px'">
      <el-button
        size="mini"
        @click="isCollapse = !isCollapse"
      >
        <i :class="isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></i
      ></el-button>
      <el-row class="tac">
        <el-col :span="24">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>用户管理</span>
              </template>
              <router-link to="/userlist">
                <el-menu-item-group>
                  <el-menu-item index="1-1">用户列表</el-menu-item>
                </el-menu-item-group>
              </router-link>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-lock"></i>
                <span>权限管理</span>
              </template>
              <router-link to="/peoplelist">
                <el-menu-item-group>
                  <el-menu-item index="1-1">角色列表</el-menu-item>
                </el-menu-item-group>
              </router-link>
              <router-link to="/rightlist">
                <el-menu-item-group>
                  <el-menu-item index="1-1">权限列表</el-menu-item>
                </el-menu-item-group>
              </router-link>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-goods"></i>
                <span>商品管理</span>
              </template>
              <router-link to="/goodslist">
                <el-menu-item-group>
                  <el-menu-item index="1-1">商品列表</el-menu-item>
                </el-menu-item-group>
              </router-link>
              <router-link to="/classpage">
                <el-menu-item-group>
                  <el-menu-item index="1-1">分类参数</el-menu-item>
                </el-menu-item-group>
              </router-link>
              <router-link to="/goodsclass">
                <el-menu-item-group>
                  <el-menu-item index="1-1">商品分类</el-menu-item>
                </el-menu-item-group>
              </router-link>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-tickets"></i>
                <span>订单管理</span>
              </template>
              <router-link to="/order">
                <el-menu-item-group>
                  <el-menu-item index="1-1">订单列表</el-menu-item>
                </el-menu-item-group>
              </router-link>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-pie-chart"></i>
                <span>数据统计</span>
              </template>
              <router-link to="/data">
                <el-menu-item-group>
                  <el-menu-item index="1-1">数据列表</el-menu-item>
                </el-menu-item-group>
              </router-link>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
    </el-aside>
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      isCollapse: false
    }
  },
  created () {

  },
  methods: {
    handleOpen (key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath)
    }
  }
}
</script>

<style scoped>
.el-aside {
  background-color: rgb(84, 92, 100);
  height: 100%;
}
.el-button {
  width: 50px;
}
.el-menu-item{
  margin-left: 10px;;
}
</style>
